<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
  disabled: Boolean
})

const emit = defineEmits(['update:modelValue'])

// 表单处理
const formRef = ref()
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
const validate = async () => {
  return new Promise(resolve => {
    formRef?.value.validate((valid, fields) => {
      resolve({ model: 'contact', name: '联系人信息', success: valid, message: fields })
    })
  })
}

// 收款账户信息
const addRow = () => {
  form.value.contact.push({
    default_account: '',
    name: '',
    job: '',
    job_type: '',
    phone: '',
    fax: '',
    tel: '',
    email: '',
    qq: '',
    wangwang: '',
  })
}
const handleCheck = (rowIndex) => {
  form.value.contact.forEach((d, i) => {
    if (rowIndex === i) return
    d.default_account = 2
  })
}

const validator = (rule, value, cb) => {
  console.log('value', value)
  const strValue = value.reduce((acc, cur) => {
    let str = ''
    for (const key in cur) {
      if (key === '_X_ROW_KEY') continue
      str += cur[key]
    }
    return acc.concat(str)
  }, '')
  if (!strValue) {
    cb(new Error('联系人信息不能为空'))
  }
  cb()
}

const clearValidate = () => {
  formRef?.value?.clearValidate()
}
const resetFields = () => {
  formRef?.value?.resetFields()
}
defineExpose({ validate, clearValidate, resetFields, formRef })
</script>

<template>
  <el-form ref="formRef" :model="form" label-position="top" :disabled="disabled">
    <el-form-item prop="contact" :rules="[{ validator }]" class="mb-0 -mt-1">
      <template #label>
        <span class="v-title my-3">
          <span class="text-red-600 mr-1">*</span>联系人信息
        </span>
        <el-button link type="primary" class="float-right -mr-3" @click="addRow">添加</el-button>
      </template>
      <div class="w-full">
        <vxe-table :data="form.contact">
          <vxe-column field="default_account" title="是否默认" :min-width="80">
            <template #default="{ row, rowIndex }">
              <el-radio v-model="row.default_account" :value="1" @change="handleCheck(rowIndex)">默认</el-radio>
            </template>
          </vxe-column>
          <vxe-column field="name" title="联系人姓名" :min-width="120">
            <template #default="{ row }">
              <el-input v-model="row.name" placeholder="联系人姓名"></el-input>
            </template>
          </vxe-column>
          <vxe-column field="job_type" title="联系人职位类型" :min-width="140">
            <template #default="{ row }">
              <VSelect v-model="row.job_type" placeholder="职位类型" :options="options.job_type" select class="w-full" />
            </template>
          </vxe-column>
          <vxe-column field="job" title="联系人职位" :min-width="120">
            <template #default="{ row }">
              <el-input v-model="row.job" placeholder="联系人职位"></el-input>
            </template>
          </vxe-column>
          <vxe-column field="phone" title="电话" :min-width="160">
            <template #default="{ row }">
              <el-input v-model="row.phone" placeholder="电话"></el-input>
            </template>
          </vxe-column>
          <vxe-column field="fax" title="传真" :min-width="160">
            <template #default="{ row }">
              <el-input v-model="row.fax" placeholder="传真"></el-input>
            </template>
          </vxe-column>
          <vxe-column field="tel" title="手机号" :min-width="120">
            <template #default="{ row }">
              <el-input v-model="row.tel" placeholder="手机号"></el-input>
            </template>
          </vxe-column>
          <vxe-column field="email" title="邮箱" :min-width="120">
            <template #default="{ row }">
              <el-input v-model="row.email" placeholder="邮箱"></el-input>
            </template>
          </vxe-column>
          <vxe-column field="qq" title="QQ" :min-width="120">
            <template #default="{ row }">
              <el-input v-model="row.qq" placeholder="QQ"></el-input>
            </template>
          </vxe-column>
          <vxe-column field="wangwang" title="旺旺" :min-width="120">
            <template #default="{ row }">
              <el-input v-model="row.wangwang" placeholder="旺旺"></el-input>
            </template>
          </vxe-column>
          <vxe-column title="操作" :min-width="80">
            <template #default="{ rowIndex }">
              <el-button link type="primary" v-show="form.contact.length > 1"
                @click="form.contact.splice(rowIndex, 1)">删除</el-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </el-form-item>
  </el-form>
</template>
